<html>
<head>
    <title>1-起步</title>
    <style>
        #tutorial {
            width: 200px;
            height: 300px;
        }
    </style>
</head>

<body onload="draw()">
<canvas id="tutorial">系统不支持canvas，则会显示这行字</canvas>
</body>

<!--
关于canvas：
1.canvas只有两个可选的属性 width、height 属性，而没有 src、alt 属性,设置width、height属性时，则默认 width为300、height为150,单位都是px
2.canvas元素为了能正常显示里面的图形，需要使用属性来控制宽高,不要用css样式去设置(如宽高属性和初始比例不一致，会出现扭曲)
3.</canvas> 标签不可省。与 <img> 元素不同<canvas> 元素需要结束标签 (</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来
4.canvas 是行块元素
-->
<script type="text/javascript">
    function draw() {
        let canvas = document.getElementById('tutorial');
        // 检测支持性
        if (!canvas.getContext) return;
        // 获得 2d 上下文对象
        // ctx.canvas: HTMLCanvasElement
        let ctx = canvas.getContext("2d");
        // 开始代码 S

        // isContextLost(), 检查上下文是否丢失
        if (ctx.isContextLost()) console.log("上下文已丢失");

        // 开始代码 E
        alert(`canvas宽度为${canvas.width},高度为${canvas.height}`)
        // "canvas宽度为300,canvas高度为150"，这里和css设置的200*300不对应
        // 所以，不要用css去设置canvas的宽高
    }

    // 动态创建canvas
    // let canvasFeat = document.createElement("canvas");
    // let canvasFeatCtx = canvasFeat.getContext("2d");
    // canvasFeat.width = 500;
    // canvasFeat.height = 500;
    // draw();
</script>

</html>